<template>
  <div class="login-register">
    <van-cell-group>
      <van-field
        v-model="ruleForm.username"
        label="用户名"
        placeholder="请输入用户名"
      />

      <van-field
        @blur="phoneCheck"
        v-model="ruleForm.phone"
        label="手机号"
        placeholder="请输入手机号"
        :error-message="errorMessage"
      />

      <van-field
        v-model="ruleForm.sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <van-button
          @click="phoneCode"
          :disabled="showButton"
          slot="button"
          size="small"
          type="primary"
          >{{ codeText }}</van-button
        >
      </van-field>

      <van-field
        v-model="ruleForm.password"
        type="password"
        label="密码"
        placeholder="请输入密码"
      />
      <van-field
        @blur="confirmPwd"
        v-model="ruleForm.cpwd"
        type="password"
        label="确认密码"
        placeholder="确认密码"
        :error-message="errorCpwd"
      />
    </van-cell-group>

    <van-cell-group>
      <van-cell-group title="性别">
        <van-radio-group v-model="ruleForm.radio" title="性别" class="gender">
          <van-radio
            class="genderItem"
            name="男"
            checked-color="#07c160"
            label-position="left"
            >男</van-radio
          >
          <van-radio
            class="genderItem"
            name="女"
            checked-color="#07c160"
            label-position="left"
            >女</van-radio
          >
        </van-radio-group>
      </van-cell-group>
    </van-cell-group>

    <div class="register-button">
      <van-button @click="registerClick" type="primary" size="large"
        >同意以下协议并注册</van-button
      >
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import axios from "axios";
// eslint-disable-next-line no-unused-vars
import qs from "qs";
export default {
  data() {
    return {
      errorMessage: "",
      errorCpwd: "",
      showButton: true,
      count: "5",
      codeText: "获取验证码",
      ruleForm: {
        username: "",
        phone: "",
        sms: "",
        radio: "男",
        password: "",
        cpwd: ""
      }
    };
  },
  computed: {},
  methods: {
    phoneCheck() {
      let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!myreg.test(this.ruleForm.phone)) {
        this.errorMessage = "手机号格式错误";
        this.showButton = true;
      } else {
        this.showButton = false;
        this.errorMessage = "";
      }
    },
    confirmPwd() {
      if (this.ruleForm.password != this.ruleForm.cpwd) {
        this.errorCpwd = "密码不正确";
      } else {
        this.errorCpwd = "";
      }
    },
    phoneCode() {
      // 获取验证码
      this.getCode();

      let params = {
        phone: this.ruleForm.phone,
        state: "reg"
      };
      let qsData = qs.stringify(params);
      axios
        .post("/api/sendSMS", qsData)
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
      console.log("yanzhengma");
    },
    getCode() {
      this.codeText = this.count + "秒后重新获取";
      if (this.showButton) return;
      this.showButton = true;
      let timer = window.setInterval(() => {
        this.count--;
        console.log(this.count);
        this.codeText = this.count + "秒后重新获取";
        if (this.count <= 0) {
          window.clearInterval(timer);
          this.codeText = "重新获取";
          this.showButton = false;
          this.count = 5;
          console.log("执行了");
        }
      }, 1000);
    },
    registerClick() {
      let params = {
        phone: this.ruleForm.phone,
        phoneCode: this.ruleForm.sms,
        pwd: this.ruleForm.password,
        name: this.ruleForm.username,
        sex: this.ruleForm.radio
      };
      let qsData = qs.stringify(params);
      axios
        .post("/api/registerUser", qsData)
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
};
</script>

<style lang="stylus" scoped>
.register-button {
  position: relative;
  top: 0.5rem;
  text-align: center;
  padding: 0 1.173rem;
}

.gender {
  display: flex;

  // justify-content: center;
  .genderItem {
    justify-content: center;
    flex: 1;
  }
}
</style>
